$(document).ready(function(){	
	//move to left and fadeout at the same time
	var divs= ["#home","#services","#contact","#about","#portfolio","#impressum"];
	var services= ["#designContent","#developmentContent","#seoContent","#cmsContent","#ecommerceContent"];
	
	//which div is being displayed
	function searchDisplayingDiv(divs){
		//go through all divs
		for(var i=0; i<divs.length; i++){
			var display = $(divs[i]).css("display");
			if(display != 'none'){
				return divs[i];
			}
		}
	}
	
	function changePage(page1,page2,speed){
		$(page1).animate({left: '+=150',opacity: 0},speed,function(){
			$(page1).css("left","0");
			$(page1).css("display","none");
			
			$(page2).css("display","block");			
			$(page2).css("left",-30);
			$(page2).animate({left: '+=30',opacity: 1},speed);
		});
		
	}
	
	function setNavEvent(){
		//set display  = none for all div except home
		for (var i=0; i<divs.length;i++){
			if(divs[i] != "#home"){
				//display and opacity
				$(divs[i]).css("display","none");
				$(divs[i]).css({opacity : 0});
			}
		}
		$('#navigation a').click(function(e){
			e.preventDefault();
			var toDisplayDiv = $(this).attr("href");
			var displayingDiv = searchDisplayingDiv(divs);
			if(displayingDiv != toDisplayDiv ){
				changePage(displayingDiv,toDisplayDiv,300);
			}
			//reset all service content
			for(var j=0; j<services.length; j++){
				//set all divs invisible
				$(services[j]).css("display","none");
			}	
		});
		$('#homeBtn a').click(function(e){
			e.preventDefault();
			var toDisplayDiv = $(this).attr("href");
			var displayingDiv = searchDisplayingDiv(divs);
			if(displayingDiv != toDisplayDiv ){
				changePage(displayingDiv,toDisplayDiv,300);
			}
		});		
		$('.avatarTop a').click(function(e){
			e.preventDefault();
			var toDisplayDiv = $(this).attr("href");
			var displayingDiv = searchDisplayingDiv(divs);
			if(displayingDiv != toDisplayDiv ){
				changePage(displayingDiv,toDisplayDiv,300);
			}
		});		
		$('.contactBtn').click(function(e){
			e.preventDefault();
			var toDisplayDiv = $(this).attr("href");
			var displayingDiv = searchDisplayingDiv(divs);
			if(displayingDiv != toDisplayDiv ){
				changePage(displayingDiv,toDisplayDiv,300);
			}
		});	
		
					
	}
	setNavEvent();
	
	function setServiceContent(divs){
		$("#servicesImg a").click(function(){
			for(var i=0; i<divs.length; i++){
				//set all divs invisible
				$(divs[i]).css("display","none");
			}
				//set clicked div visiable	
				$($(this).attr("href")).css("display","block");
					
		
		
		});
	
	
	}
	setServiceContent(services);

	
	
})